function previewForm() {
    let h1 = `
     <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .form-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .form-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-subtitle {
            opacity: 0.9;
            font-size: 14px;
        }

        .form-content {
            padding: 40px;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f0f0f0;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 25px;
            align-items: flex-start;
        }

        .form-field {
            flex: 1;
            min-width: 300px;
            position: relative;
        }

        .field-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
            font-size: 14px;
            line-height: 1.4;
        }

        .required-mark {
            color: #e74c3c;
            margin-left: 4px;
        }

        .field-input {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e8ed;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fafbfc;
        }

        .field-input:focus {
            outline: none;
            border-color: #4facfe;
            background: white;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
        }

        .field-input:disabled {
            background: #f8f9fa;
            color: #6c757d;
            cursor: not-allowed;
        }

        .field-textarea {
            min-height: 100px;
            resize: vertical;
            font-family: inherit;
        }

        .field-select {
            cursor: pointer;
        }

        .field-image-upload {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background: #fafbfc;
            transition: all 0.3s ease;
            cursor: pointer;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .field-image-upload:hover {
            border-color: #4facfe;
            background: #f0f8ff;
        }

        .field-image-upload.dragover {
            border-color: #4facfe;
            background: #e6f3ff;
            transform: scale(1.02);
        }

        .field-label-static {
            background: #f8f9fa;
            padding: 12px 16px;
            border-radius: 8px;
            border-left: 4px solid #4facfe;
            font-style: italic;
            color: #495057;
        }

        .geo-location {
            background: #f8f9fa;
            padding: 16px;
            border-radius: 8px;
            border: 2px solid #e1e8ed;
            transition: all 0.3s ease;
        }

        .geo-location:hover {
            border-color: #4facfe;
            background: #f0f8ff;
        }

        .geo-info {
            font-size: 12px;
            color: #6c757d;
            margin-top: 8px;
            font-style: italic;
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid #e9ecef;
        }

        .btn {
            padding: 12px 32px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 100px;
            position: relative;
            overflow: hidden;
        }

        .btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }

        .btn:hover:before {
            left: 100%;
        }

        .btn-ok {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
        }

        .btn-ok:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
        }

        .btn-close {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            color: #2c3e50;
            box-shadow: 0 4px 15px rgba(168, 237, 234, 0.3);
        }

        .btn-close:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(168, 237, 234, 0.4);
        }

        .btn-locate {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            color: #8b4513;
            box-shadow: 0 4px 15px rgba(252, 182, 159, 0.3);
        }

        .btn-locate:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(252, 182, 159, 0.4);
        }

        .btn-cancel {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
            color: #8b0000;
            box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
        }

        .btn-cancel:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 154, 158, 0.4);
        }

        .btn:active {
            transform: translateY(0);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-content {
                padding: 20px;
            }
            
            .form-row {
                flex-direction: column;
            }
            
            .form-field {
                min-width: 100%;
            }
            
            .button-group {
                flex-direction: column;
                align-items: center;
            }
            
            .btn {
                width: 100%;
                max-width: 200px;
            }
        }

        /* 加载动画 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 上传区域样式 */
        .upload-area {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 40px 20px;
            text-align: center;
            background: #fafbfc;
            transition: all 0.3s ease;
            cursor: pointer;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .upload-area:hover {
            border-color: #4facfe;
            background: #f0f8ff;
        }

        .upload-icon {
            font-size: 24px;
            color: #6c757d;
            margin-bottom: 8px;
        }

        .upload-text {
            color: #6c757d;
            font-size: 14px;
        }

        /* 通知样式 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 8px;
            color: white;
            font-weight: 500;
            z-index: 1000;
            animation: slideIn 0.3s ease;
            max-width: 300px;
            word-wrap: break-word;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    </style>
</head>
    `

    let model = buildTestModel();
    let fieldHtml = '';
    for (let i = 0; i < formConfig.formConfig.fields.length; i++) {
        let field = formConfig.formConfig.fields[i];
        if (field.type === 'geo-location') {
            fieldHtml += previewForm_geoLocation(field, model);
        }
        else if (field.type === 'input') {
            fieldHtml += previewForm_input(field, model);
        }
        else if (field.type === 'input-number') {
            fieldHtml += previewForm_number(field, model);
        }
        else if (field.type === 'select') {
            fieldHtml += previewForm_select(field, model);
        }
        else if (field.type === 'textarea') {
            fieldHtml += previewForm_textarea(field, model);
        }
        else if (field.type === 'image-list-upload') {
            fieldHtml += previewForm_image(field, model);
        }
        else if (field.type === 'label') {
            fieldHtml += previewForm_label(field, model);
        }
    }

    let saveButton = buildSaveButton(model);

    let h2 = `
    <body>
    <div class="form-container fade-in">
        <div class="form-header">
            <h1 class="form-title">动态表单</h1>
            <p class="form-subtitle">请填写以下信息</p>
        </div>
        
        <div class="form-content">
            <form id="dynamicForm">
                <!-- 第一行：输入框和选择框 -->
                <div class="form-row">
                    ${fieldHtml}
                </div>

                <!-- 按钮组 -->
                <div class="button-group">
                    ${saveButton}
                    <button type="button" class="btn btn-close" id="button-close">
                        📝 关闭
                    </button>
                    <button type="button" class="btn btn-locate" id="button-locate">
                        📍 获取位置
                    </button>
                    <button type="button" class="btn btn-cancel" id="button-cancel">
                        ❌ 取消
                    </button>
                </div>
            </form>
        </div>
    </div>
    `
    let h3 = `
     <script>
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('动态表单页面已加载 - 版本 1.0.0');
            
            initializeForm();
            setupEventListeners();
        });

        function initializeForm() {
            console.log('执行表单初始化');
            // 表单初始化逻辑
        }

        function setupEventListeners() {
            // 确定按钮点击事件
            document.getElementById('button-ok').addEventListener('click', handleFormSubmit);
            
            // 关闭按钮点击事件
            document.getElementById('button-close').addEventListener('click', handleFormClose);
            
            // 取消按钮点击事件
            document.getElementById('button-cancel').addEventListener('click', handleFormCancel);
            
            // 获取位置按钮点击事件
            document.getElementById('button-locate').addEventListener('click', handleGetLocation);
            
            // 定位按钮点击事件
            document.getElementById('locate-btn').addEventListener('click', handleLocationClick);
            
            // 图片上传功能
            setupImageUpload('image-list-upload_4', 'image-input-4', {
                limit: 10,
                fileType: ['png', 'jpg', 'jpeg'],
                fileSize: 5 // MB
            });
        }

        function handleFormSubmit() {
            console.log('点击了确定提交按钮');
            
            const formData = collectFormData();
            
            if (!validateForm(formData)) {
                return;
            }
            
            console.log('表单数据:', formData);
            showNotification('✅ 表单提交成功！', 'success');
        }

        function handleFormClose() {
            console.log('点击了关闭按钮');
            showNotification('📝 窗口已关闭', 'info');
            // 可以添加关闭窗口或返回上一页的逻辑
        }

        function handleFormCancel() {
            console.log('点击了取消按钮');
            
            if (confirm('确定要取消当前操作吗？所有未保存的数据将丢失。')) {
                showNotification('❌ 操作已取消', 'info');
                // 可以添加重置表单的逻辑
            }
        }

        function handleGetLocation() {
            console.log('点击了获取位置按钮');
            showNotification('📍 正在获取位置信息...', 'info');
            // 这里可以添加获取地理位置的逻辑
        }
    `
    let html = `
        function handleLocationClick() {
            console.log('点击了定位按钮');
            
            // 模拟获取位置
            const mockLocation = {
                latitude: '39.9042',
                longitude: '116.4074',
                address: '北京市东城区'
            };
            
            document.getElementById('location-display').textContent = 
                "位置: " + mockLocation.address + " (纬度: " + mockLocation.latitude + ", 经度: " + mockLocation.longitude + ")";
            
            showNotification('🎯 位置获取成功！', 'success');
        }

        function setupImageUpload(uploadAreaId, inputId, options) {
            const uploadArea = document.getElementById(uploadAreaId);
            const fileInput = document.getElementById(inputId);
            
            const config = {
                limit: options.limit || 10,
                fileType: options.fileType || ['png', 'jpg', 'jpeg'],
                fileSize: options.fileSize || 5 // MB
            };

            uploadArea.addEventListener('click', () => {
                fileInput.click();
            });

            fileInput.addEventListener('change', (e) => {
                handleFiles(Array.from(e.target.files), uploadAreaId);
            });

            uploadArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                uploadArea.classList.add('dragover');
            });

            uploadArea.addEventListener('dragleave', () => {
                uploadArea.classList.remove('dragover');
            });

            uploadArea.addEventListener('drop', (e) => {
                e.preventDefault();
                uploadArea.classList.remove('dragover');
                const files = Array.from(e.dataTransfer.files).filter(file => 
                    file.type.startsWith('image/')
                );
                handleFiles(files, uploadAreaId);
            });

            function handleFiles(files, areaId) {
                console.log("处理 " + files.length + " 个文件上传");
                if (files.length > 0) {
                    alert("准备上传 " + files.length + " 个图片文件\n最大数量: " + config.limit + "\n支持格式: " + config.fileType.join(', ') + "\n最大大小: " + config.fileSize + "MB");
                }
            }
        }

        function collectFormData() {
            const formData = {
                input_1: document.getElementById('input_1').value,
                select_2: document.getElementById('select_2').value,
                textarea_3: document.getElementById('textarea_3').value,
                'image-list-upload_4': '图片上传功能',
                label_5: document.getElementById('label_5').textContent,
                'geo-location_6': document.getElementById('location-display').textContent || '未选择位置'
            };
            
            return formData;
        }

        function validateForm(data) {
            let isValid = true;
            
            // 这里可以添加具体的验证逻辑
            if (data.input_1.trim() === '' && data.input_1 !== undefined) {
                alert('请输入 input字段1 的内容');
                isValid = false;
            }
            
            return isValid;
        }

        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.style.cssText = "
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 1000;
                animation: slideIn 0.3s ease;
                max-width: 300px;
                word-wrap: break-word;
            ";
            
            const colors = {
                success: '#27ae60',
                error: '#e74c3c',
                info: '#3498db',
                warning: '#f39c12'
            };
            
            notification.style.backgroundColor = colors[type] || colors.info;
            notification.textContent = message;
            
            const style = document.createElement('style');
            style.textContent = "
                @keyframes slideIn {
                    from { transform: translateX(100%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
            ";
            document.head.appendChild(style);
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = 'slideIn 0.3s ease reverse';
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>
`
    var allContent = h1 + "\n" + h2 + "\n" + h3 + "\n" + html;

    // 创建并打开一个可关闭的独立弹出窗口
    const previewWin = window.open('', 'formPreview', 'width=900,height=700,scrollbars=yes,resizable=yes');
    previewWin.document.open();
    previewWin.document.write(allContent);
    previewWin.document.close();

    // 在弹出窗口内注册关闭按钮事件，点击后直接关闭窗口
    previewWin.addEventListener('load', () => {
        const closeBtn = previewWin.document.getElementById('button-close');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                previewWin.close();
            });
        }
    });
}

function buildTestModel() {
    let model = {};
    for (var i = 0; i < formConfig.metadata.fields.length; i++) {
        let field = formConfig.metadata.fields[i];
        model[field] = "Field_" + field + i;
    }
    return model;
}
function findAction(type) {
    for (var i = 0; i < formConfig.formConfig.onSave.length; i++) {
        let action = formConfig.formConfig.onSave[i];
        if (action.type === type) {
            return action;
        }
    }
    return null;
}

//input
function previewForm_input(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <input 
                            type="${field.type}" 
                            id="${field.uuid}" 
                            name="${field.uuid}" 
                            class="field-input"
                            placeholder="${field.placeholder}"
                            style="${field.style || "width: 100%;"}"
                            value="${getModelValue(field, model)}"
                        >
                        </input>
                    </div>`
    return html;
}
//previewForm_number
function previewForm_number(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <input 
                            type="number" 
                            id="${field.uuid}" 
                            name="${field.uuid}" 
                            class="field-input"
                            placeholder="${field.placeholder}"
                            step="${field.step || "1"}"
                            min="${field.min || ""}"
                            max="${field.max || ""}"
                            style="${field.style || "width: 100%;"}"
                            value="${getModelValue(field, model)}"
                        >
                        </input>
                    </div>`
    return html;
}

//、select、
function previewForm_select(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <select 
                            id="select_2" 
                            name="select_2" 
                            class="field-input field-select"
                            style="width: 100%;"
                        >
                            ${field.options.map(option => `<option value="${option.value}">${option.label}</option>`).join('')}
                        </select>
                    </div>`
    return html;
}
//textarea
function previewForm_textarea(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <textarea 
                            id="textarea_3" 
                            name="textarea_3" 
                            class="field-input field-textarea"
                            placeholder="${field.placeholder}"
                            style="${field.style || "width: 100%;"}"
                        >
                        ${getModelValue(field, model)}
                        </textarea>
                    </div>`
    return html;
}
//、image-list-upload
function previewForm_image(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="image-list-upload_4">
                            image-list-upload字段4
                            <span class="required-mark">*</span>
                        </label>
                        <div class="upload-area" id="image-list-upload_4">
                            <div class="upload-icon">📷</div>
                            <div class="upload-text">
                                点击或拖拽上传图片<br>
                                <small>支持 PNG、JPG、JPEG 格式，最大 5MB，最多 10 张</small>
                            </div>
                        </div>
                        <input type="file" id="image-input-4" multiple accept="image/png,image/jpeg,image/jpg" style="display: none;">
                    </div>`
    return html;
}
//label
function previewForm_label(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <div class="field-label-static" id="${field.id}">
                            ${getModelValue(field, model) || ''}
                        </div>
                    </div>`
    return html;
}
//geo-input
function previewForm_geoLocation(field, model) {
    let html = `<div class="form-field">
                        <label class="field-label" for="${field.id}">
                            ${field.label}
                        </label>
                        <div class="geo-location" id="${field.id}">
                            <div>
                                <strong>📍 地理位置选择</strong>
                                <div class="geo-info">
                                    位置类型: point | 经度: latitude | 纬度: longitude | 几何: geom
                                </div>
                            </div>
                            <div style="margin-top: 12px;">
                                <button type="button" class="btn btn-locate" style="padding: 8px 16px; font-size: 12px; min-width: auto; margin-right: 8px;" id="locate-btn">
                                    🎯 定位
                                </button>
                                <span id="location-display" style="color: #6c757d; font-size: 12px;">未选择位置</span>
                            </div>
                        </div>
                    </div>`
    return html;
}
function getModelValue(field, model) {
    if (field.valueFormat) {
        let tpl = field.valueFormat;
        let tpl2 = tpl.replace(/\{(\w+)\}/g, (_, k) => model[k] || '');
        if (typeof tpl2 === 'string' && tpl2.startsWith('function')) {
            // 去掉前缀，取后面的计算表达式
            const expr = tpl2;
            // 用 Function 构造器执行表达式，model 作为作用域变量
            try {
                const fn = new Function('model', `return (${expr})`);
                return fn(model) || '';
            } catch (e) {
                console.error('JS:// 表达式执行失败:', e);
                return '';
            }
        }
        return tpl2;
    }
    return model[field.key] || '';
}
function buildSaveButton(model) {
    let action = findAction("save-model-data") || {};
    let modelStr = JSON.stringify(model);
    let postHtml = `
                        const api = "${action.api || ''}";
                        const method = "${action.method || 'POST'}";
                        const useage = "${(action.params && action.params.useage) || 'update'}";
                        
                        // 组装模拟提交内容
                        // 使用 Axios 发送 POST 请求
                        axios({
                            url: api,
                            method: method.toLowerCase(), // axios 需要小写方法
                            data: {
                                useage: useage,
                                model: ${modelStr}
                            },
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        .then(response => {
                            console.log(OK)
                        })
                        .catch(error => {
                            console.log(err)
                        });`
    let html = `<button type="button" class="btn btn-ok" id="button-ok" onclick="handleFakeSave()">
                        ✅ 确定提交
                    </button>
                    <script>
                    function handleFakeSave(){
                        // 弹出对话框展示
                        alert(\`${postHtml}\`);
                    }
                    </script>`
    return html;
}